<template>
  <div>
    <div class="htmlCon">
      <div>
        <div>
          <div>
            <el-collapse :class="moods" v-model="activeName" accordion>
              <el-collapse-item title="认识webpack" name="1" disabled>
                <div>
                  <i></i>
                </div>
                <pre>
                  
                </pre>
                <h3>首先让我们看一下webpack的五个核心功能</h3>
                  <p>第一个入口文件： entry webpack打包是从入口文件开始进行打包的</p>
                  <p>第二个输出文件： output 这个意思就是我们打包后的文件输出到哪里去，值为一个对象对象里面有两个参数： filename: 输出后的文件名 "built.js", 和path绝对路径，这里我引入node中的一个模块path// cosnt {resolve} = require("path") //</p>
                  <p>第三个loader： 写在module中为一个对象，里面写rules为一个数组，数组里面写具体的loader配置</p>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
const {resolve} = require("path")
export default {
  name: "BasicWebpack",
  data(){
    return {
      activeName: ["1"],
         moods: "conWrapper",
    }
  },
  mounted(){
    console.log(resolve)
  }
};
</script>

<style>

.conWrapper {
  width: 900px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 5px 5px 20px 5px #999;
  padding: 0px 20px;
  border-bottom-color: transparent;
  margin-right: 50px;
}
.htmlCon {
  display: flex;
  justify-content: center;
}
.htmlNav {
  position: fixed;
}
h2 {
    text-decoration: underline;
}
</style>